<template>
	<view class="search">
		<view class="top">
			<view class="menuButton" @click="goBack">
				<image style="width: 100%;height: 100%;" src="../../static/icons/Iconly_Light_Arrow - Left@1x.png"
					mode="center"></image>
			</view>

			<view class="searchBox" :class="{searchBoxFoucs:isInputFocused}">
				<view class="searchIcon">
					<image style="width: 100%;height: 100%;" src="../../static/icons/Iconly_Light_Search.png"
						mode="center"></image>
				</view>


				<input id="searchInput" @focus="isInputFocused = true" @blur="isInputFocused = false" type="text"
					v-model="searchWord" placeholder="Search" @confirm="search" />
			</view>
		</view>

		<template v-if="goodsData.length > 0">
			<view class="resultTitle">
				Found {{goodsData.length}} results
			</view>


			<view class="goods">
				<view @click="goItemDtail" v-for="item in goodsData" :key="item.imgUrl" class="goodItem">
					<view class="goodImg">
						<image style="width: 100%;" :src="item.imgUrl" mode="widthFix"></image>
					</view>
					<view class="goodInfo">
						<view class="goodName">
							{{item.goodName}}
						</view>

						<view class="goodPrice">
							Form ${{item.price}}
						</view>
					</view>
				</view>
			</view>
		</template>


		<view v-else class="notfound">
			<view class="notfoundImg">
				<image src="../../static/images/search/notfound.png" mode="widthFix"></image>
			</view>

			<view class="notfoundText">
				Item not found
			</view>

			<view class="notfoundDesc">
				Try a more generic search term or try looking for alternative products.
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	import {
		onLoad,
	} from '@dcloudio/uni-app';

	onLoad(query => {
		searchWord.value = query.searchword
	})

	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}

	// 搜索关键词
	const searchWord = ref("")


	// 输入框是否聚焦
	const isInputFocused = ref(false)

	// 搜索商品
	const search = () => {

	}

	// 商品数据
	const goodsData = ref([])

	// 模拟获取数据
	const getGoodData = () => {
		setTimeout(() => {
			goodsData.value = [{
					imgUrl: "../../static/images/search/ipadair.png",
					goodName: "Apple iPad Air",
					price: "579"
				}, {
					imgUrl: "../../static/images/search/applewatch.png",
					goodName: "Apple Watch",
					price: "139"
				},
				{
					imgUrl: "../../static/images/search/macbbok.png",
					goodName: "Apple MacBook",
					price: "879"
				},
				{
					imgUrl: "../../static/images/search/iphone.png",
					goodName: "Apple iPhone",
					price: "879"
				},
				{
					imgUrl: "../../static/images/search/ipadair.png",
					goodName: "Apple iPad Air",
					price: "579"
				}, {
					imgUrl: "../../static/images/search/applewatch.png",
					goodName: "Apple Watch",
					price: "139"
				},
				{
					imgUrl: "../../static/images/search/macbbok.png",
					goodName: "Apple MacBook",
					price: "879"
				},
				{
					imgUrl: "../../static/images/search/iphone.png",
					goodName: "Apple iPhone",
					price: "879"
				}
			]

			// console.log(goodsData.value);
		}, 2000)

	}


	// 跳转详情页面
	const goItemDtail = () => {
		uni.navigateTo({
			url: '/pages/singleItem/singleItem'
		})
	}
	onMounted(() => {
		getGoodData()
	})
</script>

<style scoped lang="scss">
	.search {
		width: 100vw;
		min-height: 100vh;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: start;
		background-color: rgba(245, 245, 248, 1);



		.top {
			width: 100%;
			height: 120rpx;
			padding: 0 80rpx;
			margin-top: 94rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 52rpx;

			.menuButton {
				width: 44rpx;
				height: 29rpx;
			}

			.searchBox {
				width: 100%;
				height: 120rpx;
				border-radius: 60rpx;
				border: 4rpx solid rgba(134, 134, 134, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 24rpx;

				.searchIcon {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}


		.resultTitle {
			margin-top: 104rpx;
			font-size: 56rpx;
			font-weight: 600;
			letter-spacing: 0px;
			line-height: 0px;
			color: rgba(0, 0, 0, 1);
		}

		.goods {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 90rpx;
			height: fit-content;
			flex-wrap: wrap;
			// overflow: auto;
			gap: 6rpx;
			width: 100vw;
			padding: 0 30rpx;

			.goodItem {
				width: 312rpx;
				height: 504rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: end;
				position: relative;
				margin: 20rpx auto;

				.goodImg {
					width: 228rpx;
					position: absolute;
					bottom: 242.14rpx;
					overflow: hidden;
					border-radius: 20rpx;
				}

				.goodInfo {
					width: 100%;
					height: 424.82rpx;
					border-radius: 20rpx;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
					display: flex;
					flex-direction: column;
					justify-content: end;
					align-items: center;
					padding-bottom: 61rpx;

					.goodName {
						font-size: 44rpx;
						font-weight: 600;
						letter-spacing: 0px;
						line-height: 51.66rpx;
						color: rgba(0, 0, 0, 1);
						text-align: center;
						padding: 14%;
					}

					.goodPrice {
						font-size: 34rpx;
						font-weight: 700;
						letter-spacing: 0px;
						line-height: 0px;
						color: rgba(89, 86, 233, 1);
					}
				}
			}
		}

		.notfound {
			margin-top: 20%;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			width: 100vw;

			.notfoundimg {
				width: 100%;
			}

			.notfoundText {
				margin-top: 30rpx;
				font-size: 56rpx;
				font-weight: 600;
				letter-spacing: 0px;
				// line-height: 0px;
				color: rgba(0, 0, 0, 1);
			}

			.notfoundDesc {
				width: 100%;
				padding: 0 80rpx;
				text-align: center;
				opacity: 0.57;
				font-size: 34rpx;
				font-weight: 400;
				letter-spacing: 0px;
				// line-height: 47.6px;
				color: rgba(0, 0, 0, 1);
			}
		}

	}

	.searchBoxFoucs {
		border: 4rpx solid rgba(89, 86, 233, 1) !important;
	}
</style>